import React, { Component } from 'react'
import './index.scss'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

class RecentAct extends Component{
	constructor(props) {
		super(props);
		this.state = {
				actData: this.props.actData
		}
	}

	render() {
		return (
			<div id="recent-act">
					<p className="title">近期活动</p>
					<div className="swiper-container-active">
							<div className="swiper-wrapper">
									{
											this.state.actData.map((item, index) =>
													<div className="swiper-slide" key={index} onClick={RecentAct.toActive.bind(this, item.url)}>
															<img src={item.img} alt=""/>
															<p>{item.title}</p>
													</div>
											)
									}

							</div>
					</div>
			</div>
		)
	}

	static toActive(url) {
			window.location.href = url
	}

	componentDidMount() {
			new Swiper('.swiper-container-active', {
					slidesPerView: 1.7,
					spaceBetween: 20,
					freeMode: true,
					pagination: {
							el: '.swiper-pagination',
							clickable: true,
					},
			});
	}

}

export default RecentAct
